<template>
  <div class="coupons">
    <van-nav-bar title="我的优惠券" left-arrow @click-left="goBack" />
    <div v-for="coupon in coupons" :key="coupon.id" class="coupon-item">
      <van-card
          :title="coupon.name"
          :desc="coupon.desc"
          :thumb="coupon.image"
      >
        <template #footer>
          <van-tag type="primary">{{ coupon.expiry }}</van-tag>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const goBack = () => {
  router.back()
}

const coupons = ref([
  { id: 1, name: '满100减20', desc: '全场通用', image: '', expiry: '2024-12-31' },
  { id: 2, name: '满200减50', desc: '限服饰类', image: '', expiry: '2024-12-15' },
])
</script>

<style scoped>
.coupon-item {
  margin-bottom: 15px;
}
</style>
